﻿@using LogDashboard
@using LogDashboard.Extensions
@using LogDashboard.Models
@inherits RazorLight.TemplatePage<IEnumerable<LogDashboard.Models.ILogModel>>
@{
    Layout = "Views._layout.cshtml";
}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" onclick="(window.location.href='@ViewBag.DashboardMapPath/Dashboard/BasicLog?All=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewBag.allCount</span>
                        <span class="font-weight-light">所有日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-reply-all"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" onclick="(window.location.href='@ViewBag.DashboardMapPath/Dashboard/BasicLog?Unique=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewBag.unique</span>
                        <span class="font-weight-light">不重复的日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-question"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" onclick="(window.location.href='@ViewBag.DashboardMapPath/Dashboard/BasicLog?ToDay=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewBag.todayCount</span>
                        <span class="font-weight-light">今天的日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-external-link-square"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" onclick="(window.location.href='@ViewBag.DashboardMapPath/Dashboard/BasicLog?Hour=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewBag.hourCount</span>
                        <span class="font-weight-light">一小时之内</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="icon icon-clock"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#hourChartPanel" onclick="getLogChart(1)" role="tab" aria-controls="overview" aria-selected="true">小时</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#dayChartPanel" onclick="getLogChart(2)"  role="tab" aria-controls="environment" aria-selected="false">天</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#weekChartPanel" onclick="getLogChart(3)" role="tab" aria-controls="environment" aria-selected="false">周</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#monthChartPanel" onclick="getLogChart(4)"  role="tab" aria-controls="environment" aria-selected="false">月</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="hourChartPanel"  role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="hourChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="dayChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="dayChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="weekChartPanel"  role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="weekChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="monthChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="monthChart" width="100%" height="20"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 3%">
    <div class="card-header bg-light">
        最近十条
        <i class="fa fa-refresh" onclick="loadList(1,10)" style="float: right"></i>
    </div>
    <div class="card-body" id="LogList">
        <div class="table-responsive">
            <table class="table row mx-0">
                <thead class="w-100">
                    <tr class="row mx-0">
                        <th class="col-1">Id</th>
                        <th class="col-3">Logger</th>
                        <th class="col-1">级别</th>
                        <th class="col-4">消息</th>
                        <th class="col-2">时间</th>
                        <th class="col-1">详情</th>
                    </tr>
                </thead>
                <tbody class="w-100">
                    @foreach (var item in Model)
                    {
                        <tr class="row mx-0">
                            <td class="col-1"><a href="javascript:void(0);" onclick="logInfo('@item.Id')">@item.Id</a></td>
                            <td class="col-3">@item.Logger</td>
                            @{
                                if (item.Level.ToLower() == "error")
                                {
                                    <div class="modal fade" id="@item.Id">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header bg-danger border-0"><h5 class="modal-title text-white">Exception</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">
                                                    <pre>@item.Exception</pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <td class="col-1"><button class="btn btn-outline-@item.Level.ToUpper()" onclick='$("#@item.Id").modal();'>@item.Level</button></td>
                                }
                                else
                                {
                                    <td class="col-1"><button class="btn btn-outline-@item.Level.ToUpper()">@item.Level</button></td>
                                }
                            }

                            <td class="col-4" onclick="$(this).next().show(); $(this).css('display','none');">
                                @{
                                    var message = item.Message;
                                    if (message.Length > 90)
                                    {
                                        message = message.Substring(0, 90) + "........";
                                    }
                                }
                                @message
                            </td>
                            <td class="col-4" style="display: none;" onclick="$(this).prev().show(); $(this).css('display','none');">@item.Message</td>
                            <td class="col-2">@item.LongDate</td>
                            <td class="col-1"><a href="javascript:void(0);" onclick="logInfo('@item.Id-info','logInfoModal','logInfoBody')">详情</a></td>
                            <div style="display: none" id="@item.Id-info">@item.ToJsonString()</div>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="modal fade show" id="logInfoModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">日志详情</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body" id="logInfoBody">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@section Scripts{
    <script>

        function monthChartLabels() {
            var now = new Date();
            month = parseInt(now.getMonth(), 10) + 1;
            var days = new Date(now.getYear(), month, 0).getDate();
            var res = [];
            for (var i = 1; i <= days; i++) {
                res.push(i + "d");
            }
            return res;
        }

        var charts = [
            { chart: $('#hourChart'), id: '#hourChart', labels: ["10m", "20m", "30m", "40m", '50m', '60m'] },
            {
                chart: $('#dayChart'),
                id: '#dayChart',
                labels: [
                    "1h", "2h", "3h", "4h", '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h',
                    '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '24h'
                ]
            },
            {
                chart: $('#weekChart'),
                id: '#weekChart',
                labels: ["Monday", "Tuesday", "Wednesday", "Thursday", 'Friday', 'Saturday', 'Sunday']
            },
            { chart: $('#monthChart'), id: '#monthChart', labels: monthChartLabels() }
        ];


        $(function() {

            var output = JSON.parse('@Raw(ViewBag.ChartData)');
            charts[0].all = output.All;
            charts[0].error = output.Error;
            initLineChart(charts[0]);
        });

        function getLogChart(i) {
            $.ajax({
                method: "post",
                url: mapPath + "/Dashboard/GetLogChart",
                data: JSON.stringify({ ChartDataType: i })
            }).done(function (data) {
                charts[i - 1].all = data.All;
                charts[i - 1].error = data.Error;
                initLineChart(charts[i - 1]);
            });
        }

        function initLineChart(opt) {
            new Chart(opt.chart,
                {
                    type: 'line',
                    data: {
                        labels: opt.labels,
                        datasets: [
                            {
                                label: 'all',
                                data: opt.all,
                                backgroundColor: 'rgba(66, 165, 245, 0.5)',
                                borderColor: '#2196F3',
                                borderWidth: 1
                            }, {
                                label: 'error',
                                data: opt.error,
                                backgroundColor: 'rgba(251, 105, 104, 0.5)',
                                borderColor: '#f75656',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [
                                {
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }
                            ]
                        }
                    }
                });
        }
    </script>
}